* {margin: 0 auto;padding: 0;}
/*Preloader*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    height: 100vh;
    width: 100%;
    z-index: 9999;
}

.preloader:before, .preloader:after {
    content: '';
    border: 5px solid #D19A04;
    width: 80px;
    height: 80px;
    border-radius: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
}

.preloader:before {
    -webkit-animation: pulse-outer 0.8s ease-in infinite;
    -moz-animation: pulse-outer 0.8s ease-in infinite;
    animation: pulse-outer 0.8s ease-in infinite;
}

.preloader:after {
    -webkit-animation: pulse-inner 0.8s linear infinite;
    -moz-animation: pulse-inner 0.8s linear infinite;
    animation: pulse-inner 0.8s linear infinite;
}

@-webkit-keyframes pulse-outer {
    0% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    50% {
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
    100% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
@-moz-keyframes pulse-outer {0% {opacity: 1;filter: alpha(opacity=100);}50% {opacity: 0.5;filter: alpha(opacity=50);}100% {opacity: 0;filter: alpha(opacity=0);}}
@keyframes pulse-outer {0% {opacity: 1;filter: alpha(opacity=100);}50% {opacity: 0.5;filter: alpha(opacity=50);}100% {opacity: 0;filter: alpha(opacity=0);}}
@-webkit-keyframes pulse-inner {0% {-webkit-transform: scale(0);opacity: 0;filter: alpha(opacity=0);}100% {-webkit-transform: scale(1);opacity: 1;filter: alpha(opacity=100);}}
@-moz-keyframes pulse-inner {0% {-moz-transform: scale(0);opacity: 0;filter: alpha(opacity=0);}100% {-moz-transform: scale(1);opacity: 1;filter: alpha(opacity=100);}}
@keyframes pulse-inner {0% {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);opacity: 0;filter: alpha(opacity=0);}100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);opacity: 1;filter: alpha(opacity=100);}}
.swiper-container {}

.swiper-wrapper {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px;
}

.swiper-slide {
    height: 100%;
    width: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-size: 100% auto;
    overflow: hidden;
    text-align: center;
}
.slide1{background: url(../static/image/m_banner1.png) no-repeat;}
.slide2{background: url(../static/image/m_banner2.png) no-repeat;}
.slide3{background: url(../static/image/m_banner3.png) no-repeat;}
.slide4{background: url(../static/image/m_banner4.png) no-repeat;}
.slide1,.slide2,.slide3,.slide4{
    background-size: 100% 100%;
    background-position: center;
    position: relative;
}
.slide1 .logo{
    display: block;
    width: 1.76rem;
    margin: auto;
    margin-top: 1.75rem;
    opacity: 0;
}
.slide1 .phone{
    display: block;
    width: 5rem;	
    position: absolute;
    bottom: 0rem;
    left: 50%;
    margin-left: -2.5rem;
    opacity: 0;
}
.slide1 .bar{
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0rem;
    opacity: 0;
}
.arrow{
    position: absolute;
    bottom: 0.1rem;
    width: 0.44rem;
    left: 50%;
    margin-left: -0.22rem;
    opacity: 0;
}
.swiper-slide-active .logo{
    -webkit-animation-name:zoomIn;-webkit-animation-delay: 1.5s;-webkit-animation-duration:0.6s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:zoomIn;-moz-animation-delay: 1.5s;-moz-animation-duration: 0.6s;-moz-animation-fill-mode: forwards;
    animation-name:zoomIn;animation-delay: 1.5s;animation-duration: 0.6s;animation-fill-mode: forwards;
}
.swiper-slide-active .phone{
    -webkit-animation-name:fadeInUp;-webkit-animation-delay: 1s;-webkit-animation-duration:0.8s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInUp;-moz-animation-delay: 1s;-moz-animation-duration: 0.8s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInUp;animation-delay: 1s;animation-duration: 0.8s;animation-fill-mode: forwards;
}
.swiper-slide-active .bar{
    -webkit-animation-name:fadeIn;-webkit-animation-delay: 0.3s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeIn;-moz-animation-delay: 0.3s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeIn;animation-delay: 0.3s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .arrow{
    -webkit-animation-name:fadeOutUp;-webkit-animation-delay: 0s;-webkit-animation-duration:1.5s;-webkit-animation-fill-mode: forwards;-webkit-animation-iteration-count: infinite;   
    -moz-animation-name:fadeOutUp;-moz-animation-delay: 0s;-moz-animation-duration:1.5s;-moz-animation-fill-mode: forwards;-moz-animation-iteration-count: infinite;
    animation-name:fadeOutUp;animation-delay: 0s;animation-duration: 1.5s;animation-fill-mode: forwards;animation-iteration-count: infinite;
}
.slide2 .word_bar{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3rem;
    margin-top: -3rem;	
    background: url(../static/image/m_banner2_bg.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
}
.slide2 .here{
    width: 1.5rem;
    margin-top: 1rem;
    opacity: 0;
}
.slide2 .word1,.slide2 .word2,.slide2 .word3{
    font-size: 0.34rem;
    color: #FEFEFE;
    margin-top: 0.32rem;
    opacity: 0;
}
.slide2 .lower_line,.slide2 .upper_line{
    width: 2.75rem;
    position: absolute;
    opacity: 0;
}
.slide2 .upper_line{
    top: 0rem;
    right: 0.5rem;
    opacity: 0;
}
.slide2 .lower_line{
    bottom: 0rem;
    left: 0.5rem;
    opacity: 0;
}
.swiper-slide-active .word_bar{
    -webkit-animation-name:bounceInDown;-webkit-animation-delay: 0s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:bounceInDown;-moz-animation-delay: 0s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:bounceInDown;animation-delay: 0s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .here{
    -webkit-animation-name:zoomIn;-webkit-animation-delay: 0.3s;-webkit-animation-duration:1s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:zoomIn;-moz-animation-delay: 0.3s;-moz-animation-duration:1s;-moz-animation-fill-mode: forwards;
    animation-name:zoomIn;animation-delay: 0.3s;animation-duration: 1s;animation-fill-mode: forwards;
}
.swiper-slide-active .word1{
    -webkit-animation-name:fadeInLeft;-webkit-animation-delay: 0.8s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInLeft;-moz-animation-delay: 0.8s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInLeft;animation-delay: 0.8s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .word2{
    -webkit-animation-name:fadeInRight;-webkit-animation-delay: 1.2s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInRight;-moz-animation-delay: 1.2s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInRight;animation-delay: 1.2s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .word3{
    -webkit-animation-name:fadeInUp;-webkit-animation-delay: 1.6s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInUp;-moz-animation-delay: 1.6s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInUp;animation-delay: 1.6s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .upper_line{
    -webkit-animation-name:slideInTopRight;-webkit-animation-delay: 1.5s;-webkit-animation-duration:1s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:slideInTopRight;-moz-animation-delay: 1.5s;-moz-animation-duration:1s;-moz-animation-fill-mode: forwards;
    animation-name:slideInTopRight;animation-delay: 1.5s;animation-duration:1s;animation-fill-mode: forwards;
}
.swiper-slide-active .lower_line{
    -webkit-animation-name:slideInBottomLeft;-webkit-animation-delay: 1.5s;-webkit-animation-duration:1s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:slideInBottomLeft;-moz-animation-delay: 1.5s;-moz-animation-duration:1s;-moz-animation-fill-mode: forwards;
    animation-name:slideInBottomLeft;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: forwards;
}
.slide3 .word_bars{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3rem;
    margin-top: -3rem;	
    background: url(../static/image/m_banner3_bg.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
}
.slide3 .here{
    width: 1.5rem;
    margin-top: 0.7rem;
    opacity: 0;
}
.slide3 .words1,.slide3 .words2,.slide3 .words3,.slide3 .words4{
    font-size: 0.34rem;
    color: #FEFEFE;
    margin-top: 0.2rem;
    opacity: 0;
}
.slide3 .lower_line,.slide3 .upper_line{
    width: 2.75rem;
    position: absolute;
    opacity: 0;
}
.slide3 .upper_line{
    top: 0rem;
    right: 0.5rem;
    opacity: 0;
}
.slide3 .lower_line{
    bottom: 0rem;
    left: 0.5rem;
    opacity: 0;
}
.slide3 .join_us{
    width: 3.6rem;
    position: absolute;
    top: 50%;
    margin-top: 4.2rem;
    left: 50%;
    margin-left: -1.8rem;
    opacity: 0;
}
.swiper-slide-active .word_bars{
    -webkit-animation-name:fadeIn;-webkit-animation-delay: 0.5s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeIn;-moz-animation-delay: 0.5s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeIn;animation-delay: 0.5s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .words1{
    -webkit-animation-name:fadeInUp;-webkit-animation-delay: 0.8s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInUp;-moz-animation-delay: 0.8s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInUp;animation-delay: 0.8s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .words2{
    -webkit-animation-name:fadeInUp;-webkit-animation-delay: 1.2s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInUp;-moz-animation-delay: 1.2s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInUp;animation-delay: 1.2s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .words3{
    -webkit-animation-name:fadeInUp;-webkit-animation-delay: 1.6s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInUp;-moz-animation-delay: 1.6s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInUp;animation-delay: 1.6s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .words4{
    -webkit-animation-name:fadeInUp;-webkit-animation-delay: 2s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInUp;-moz-animation-delay: 2s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInUp;animation-delay: 2s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .join_us{
    -webkit-animation-name:bounceInDown;-webkit-animation-delay: 2.2s;-webkit-animation-duration:1s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:bounceInDown;-moz-animation-delay: 2.2s;-moz-animation-duration:1s;-moz-animation-fill-mode: forwards;
    animation-name:bounceInDown;animation-delay: 2.2s;animation-duration: 1s;animation-fill-mode: forwards;
}
.slide4 .title{
    width: 2.4rem;
    display: block;
    margin: auto;
    margin-top: 1.2rem;
    opacity: 1;        
}
.slide4 .stitle{
    display: block;
    margin: auto;
    width: 4.3rem;
    margin-top: 1.4rem;
    opacity: 0;
}
.slide4 .download{
    width: 45%;
    display: inline-block;
    line-height: 0.26rem;
    margin-top: 1rem;
    opacity: 0;
}
.slide4 .download img{
    width: 100%;
}
.slide4 .iphone{
    width: 5.9rem;
    margin-top: 0.3rem;
    position: absolute;
    left: 50%;
    margin-left: -2.95rem;
    bottom: 0.2rem;
    z-index: 1;
    opacity: 0;
}
.slide4 .screen{
    width: 5.14rem;
    position: absolute;
    left: 50%;
    margin-left: -3rem;
    bottom: 1rem;
    z-index: 2;
    opacity: 0;
}
.slide4 .gray{
    width: 6.74rem;
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    opacity: 0;
}
.swiper-slide-active .title{
    -webkit-animation-name:slideInDown;-webkit-animation-delay: 1s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:slideInDown;-moz-animation-delay: 1s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:slideInDown;animation-delay: 1s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .stitle{
    -webkit-animation-name:fadeInDown;-webkit-animation-delay: 1.2s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInDown;-moz-animation-delay: 1.2s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInDown;animation-delay: 1.2s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .download{
    -webkit-animation-name:zoomIn;-webkit-animation-delay: 1.5s;-webkit-animation-duration:1s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:zoomIn;-moz-animation-delay: 1.5s;-moz-animation-duration:1s;-moz-animation-fill-mode: forwards;
    animation-name:zoomIn;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: forwards;
}
.swiper-slide-active .iphone{
    -webkit-animation-name:fadeInRight;-webkit-animation-delay: 0.5s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInRight;-moz-animation-delay: 0.5s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInRight;animation-delay: 0.5s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .screen{ 
    -webkit-animation-name:fadeInLeft;-webkit-animation-delay: 0.5s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:fadeInLeft;-moz-animation-delay: 0.5s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:fadeInLeft;animation-delay: 0.5s;animation-duration: 0.5s;animation-fill-mode: forwards;
}
.swiper-slide-active .gray{
    -webkit-animation-name:slideInUp;-webkit-animation-delay: 0s;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode: forwards;   
    -moz-animation-name:slideInUp;-moz-animation-delay: 0s;-moz-animation-duration:0.5s;-moz-animation-fill-mode: forwards;
    animation-name:slideInUp;animation-delay: 0s;animation-duration: 0.5s;animation-fill-mode: forwards;
}